<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">     
<html xmlns="http://www.w3.org/1999/xhtml">  
  
<head>     
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />     
<title>简单的测试页面</title>     
<style type="text/css">     
<!--     
#dt_3 {     
cursor: pointer;     
}  
  
div#mbDIV {     
position: absolute;     
top: 0px;     
left: 0px;     
width: 100%;     
height: 100%;     
background-color: #000;     
z-index: 10;     
filter: alpha(opacity=50);     
opacity: 0.5;    /**设置50%透明 **/    
}     
div#loginDIV {     
position: absolute;     
width: 300px;     
height: 150px;     
background-color: #FFFF00;     
z-index: 20;     
}     
div#loginTopDIV {     
width: 100%;     
height: 20px;     
background-color: #FF0000;     
cursor: move;     
}     
-->     
</style>     
<script type="text/javascript">     
<!--     
function show(ele)     
{     
eval(ele + ".style.display = ''");     
}     
function hidden(ele)     
{     
eval(ele + ".style.display = 'none'");     
}     
//-->     
</script>     
</head>  
  
<body>  
  
<div style="overflow: hidden;">     
<h3>请点击 --> 03号拖拉机</h3>     
<p id="dt_1">01号拖拉机</p>     
<p id="dt_2">02号拖拉机</p>     
<p id="dt_3">03号拖拉机</p>     
<p id="dt_4">04号拖拉机</p>     
</div>     
<div id="mbDIV" style="display: none;">
	<!-- 设置弹出层的底部颜色，让底部文字不可见 -->
</div>     
             <!-- 以下是弹出框     -->
<div id="loginDIV" style="top: 200px; left: 300px; display: none;">     
	<div id="loginTopDIV">     
		Move
	</div>     
	<p style="text-align: center;">登陆内容在这里哦</p>     
	<form action="#" method="get" style="text-align: center;">     
	<input id="button_1" type="button" value="确定" />     
	<input id="button_2" type="button" value="取消" />     
	</form>     
</div>     
<script type="text/javascript">     
<!--     
/**    
* 显示和隐藏信息    
* */  
  
document.getElementById("button_1").onclick = function()     
{     
hidden("loginDIV");     
hidden("mbDIV");     
}     
document.getElementById("button_2").onclick = function()     
{     
hidden("loginDIV");     
hidden("mbDIV");     
}     
dt_3.onclick = function()     
{     
loginDIV.style.top = "200px";     
loginDIV.style.left = "300px";     
show("loginDIV");     
show("mbDIV")     
}  
  
    
/**    
*这里写的是拖动信息    
* */     
loginTopDIV.onmousedown = Down;     
var tHeight,lWidth;     
function Down(e)     
{     
var event = window.event || e;     
tHeight = event.clientY  - parseInt(loginDIV.style.top.replace(/px/,""));     
lWidth  = event.clientX - parseInt(loginDIV.style.left.replace(/px/,""));     
document.onmousemove = Move;     
document.onmouseup   = Up;     
}     
function Move(e) {     
var event = window.event || e;     
var top = event.clientY - tHeight;     
var left = event.clientX - lWidth;     
//判断 top 和 left 是否超出边界     
top = top < 0 ? 0 : top;     
top = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top;     
left = left < 0 ? 0 : left;     
left = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left;   
loginDIV.style.top  = top + "px";     
loginDIV.style.left = left +"px";     
}     
function Up() {     
document.onmousemove = null;     
}  
  
</script>  
  
</body>  
  
</html>   